<template>
  <div class="afterSales-box">
    <!-- 售后 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <el-button @click="newFlow">新增</el-button>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      :typeView="'售后'"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
      @operateAfterSales="operateAfterSales"
    >

    </forTableCom>
    <PopUps
      v-if="flag"
      widthMy="39%"
      height-my="45%"
    >
      <!-- 详细弹窗 -->
      <AddafterSales @closePopUps="closePopUps" />
    </PopUps>
    <PopUps
      v-if="updateFlag"
      widthMy="30%"
      height-my="40%"
    >
      <!-- 详细弹窗 -->
      <UpdateafterSales
        @closePopUps="closePopUps"
        :id="id"
      />
    </PopUps>
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import { ref, onMounted } from 'vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { selectAfterSaleListApi, updateAfterSaleAPi } from '@/api/teams/index.js'
import PopUps from '@/components/My/PopUps/index.vue'
import AddafterSales from './components/AddafterSales.vue'
import UpdateafterSales from './components/UpdateafterSales.vue'
let updatePop = updatePopHook()


// 弹窗
let flag = ref(false)
let updateFlag = ref(false)

// 表格
let color = ref('#333')
let bg = ref('#F6F6F6')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

const newFlow = () => {
  flag.value = true
}
// 勾选背景id
const idActive = 'constructionTeamId'

// 表单
let inventoryForm = ref(
  {
    constructionTeamId: '',     //施工队编号
    constructionTeamName: '',    //施工队名称
    orderId: '',          // 单据编号
    creator: '',         // 制单人
  }
)
const closePopUps = () => {
  flag.value = false
  updateFlag.value = false
  getoutboundOrderData()
}
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    name: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    name: 'orderId',
    label: '单据编号',
  },
  {
    name: 'creator',
    label: '制单人',
  }
])

// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamId',
    label: '施工队编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamRegion',
    label: '施工队区域',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamName',
    label: '施工队名称',
    minwidth: 100
  },
  {
    prop: 'AfterSalesDispatchTime',
    label: '售后派单时间',
    minwidth: 100
  },
  {
    prop: 'AfterSalesFinishTime',
    label: '售后完毕时间',
    minwidth: 100
  },
  {
    prop: 'AfterSalesCauseAnalysis',
    label: '售后原因分析',
    minwidth: 100
  },
  {
    prop: 'creator',
    label: '制单人'
  },
  {
    prop: 'type',
    label: '状态',
  }, {
    prop: 'operate',
    label: '操作',
  },
])
// 表格数据内容
let inventoryTableData = ref([

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

const id = ref(null)
const operateAfterSales = async (rowData) => {
  id.value = rowData.id
  updateFlag.value = true
}
// 查询入库单数据
const queryOutboundList = async (data = '') => {
  let res = await selectAfterSaleListApi(data)
  let { code, rows, total } = res
  if (code === 200) {
    inventoryTableData.value = rows
    // 改变日期显示长度问题
    totals.value = total
  }
}
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  queryOutboundList(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(obj, inventoryForm.value)
  queryOutboundList(params)
}
// 请求出库单接口函数
const getoutboundOrderData = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  queryOutboundList(params)
}

onMounted(() => {
  getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.afterSales-box {
  padding: 16px;
}
</style>
